<template>
  <div>
    <vxe-form
      ref="xForm"
      title-align="right"
      title-width="100"
      :data="formData2"
      :rules="formRules2"
      :loading="loading2"
      @submit="submitEvent2"
      @reset="resetEvent">
      <vxe-form-item title="广告位名称" field="name" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.name" placeholder="请输入名称" clearable
                     @input="$refs.xForm.updateStatus(scope)"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="模板调用标识" field="position" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.position" placeholder="请输入模板调用标识" clearable
                     @input="$refs.xForm.updateStatus(scope)"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="广告位描述" field="position_desc" span="24">
        <template v-slot>
          <vxe-textarea v-model="formData2.position_desc" placeholder="请输入广告位描述" clearable></vxe-textarea>
        </template>
      </vxe-form-item>
      <vxe-form-item title="是否启用" field="status" span="24">
        <template v-slot>
          <vxe-switch v-model="formData2.status" on-label="启用" off-label="禁用"></vxe-switch>
        </template>
      </vxe-form-item>
      <vxe-form-item title="排序" field="sort" span="24">
        <template v-slot>
          <vxe-input type="integer" v-model="formData2.sort"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item align="center" span="24">
        <template v-slot>
          <vxe-button type="submit" status="primary">保存广告位</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
import { adPositionSave } from '@/api/ad'

let formData = {
  name: '',
  description: '',
  status: true,
  sort: 50,
  verifyPassword: ''
}
export default {
  name: 'add',
  data () {
    return {
      loading2: false,
      formRules2: {
        name: [
          { required: true, message: '请输入广告位名称' }
        ],
        position: [
          { required: true, message: '请输入广告位调用标识' }
        ]
      },
      formData2: Object.assign({}, formData)
    }
  },
  methods: {
    submitEvent2 () {
      this.$XModal.alert({
        message: '添加中，请稍后',
        status: 'loading',
        id: 'loading'
      })
      adPositionSave({
        name: this.formData2.name,
        position_desc: this.formData2.position_desc ? this.formData2.position_desc : '',
        status: this.formData2.status ? 1 : 0,
        position: this.formData2.position,
        sort: this.formData2.sort ? this.formData2.sort : 100
      }).then(({ data, status }) => {
        if (status === 200) {
          // 添加成功
          this.$XModal.close('loading')
          this.$XModal.alert({
            message: data.message,
            status: 'success'
          })
          this.formData2 = Object.assign({}, formData)
          this.$emit('adPositionSave')
        } else {
          this.$XModal.close('loading')
          this.$XModal.alert({
            message: data.message,
            status: 'error'
          })
        }
      }).catch((error) => {
        this.$XModal.close('loading')
        this.$XModal.alert({
          message: error.response.data.message,
          status: 'error'
        })
      })
    },
    resetEvent () {

    }
  }
}
</script>

<style scoped>

</style>
